import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navList: [],
    navId: '',
    videoList: [],
    vid: '',//保存当前播放视频id
    recordList: [], //保存视频播放记录
    // 每个视频播放记录的数据格式
    // 播放时间必须要保存
    // 视频的id 查询记录的时候使用
    // {vid,currentTime}
    flag:false
  },

  // 获取nav导航数据
  async getNavList() {
    const result = await request('/video/group/list')
    if (result.code === 200) {
      // console.log(result)
      this.setData({
        navList: result.data.slice(0, 20),
        navId: result.data[0].id  //一上来获取到数据的时候就把第一个人的id保存起来
      })
    }
  },


  // 请求获取视频的列表数据
  // 第一次发什么时候发，得判断用户登录没有，而且还得在获取到第一个人id的时候发
  async getVideoList() {
    const result = await request('/video/group', { id: this.data.navId })
    if (result.code === 200) {
      // console.log(result)
      this.setData({
        videoList: result.datas.map(item => item.data),
        flag:false
      })
    }
  },

  // 点击切换nav
  changeNav(event) {
    // 切换nav
    this.setData({
      // navId:event.target.id * 1
      navId: event.target.dataset.id * 1
    })
    // 重新请求视频列表数据
    this.getVideoList()
  },


  // 点击播放或者暂停视频
  playOrPause(event) {
    // 保存点击的视频id
    this.setData({
      vid: event.currentTarget.id
    })
    // 创建视频执行上下文控制视频的播放
    // 1、用户点击的视频是第一次还是不是一次
    // 如果是第一次，证明用户之前没点过，那么我们正常创建视频执行上下文，去播放视频
    // 单例，只能存在一个执行上下文对象，我们存储在this身上
    if (!this.player) {
      // 证明第一次
      this.player = wx.createVideoContext(this.data.vid)
      this.player.play()
      // 播放视频之后，我们要保存现在播放的视频id 及 现在视频的播放状态，为了后面打基础
      this.vid = this.data.vid //这里后期可以通过this身上的vid和data的vid判断点的是不是同一个
      this.isPlay = true //这里我们后期可以通过它知道现在的视频播放状态是播放还是暂停
    } else {
      //用户不是第一次点击
      if (this.vid === this.data.vid) {
        //点的同一个 
        if (this.isPlay) {
          this.player.pause()//暂停播放
          this.isPlay = false //改变播放状态
        } else {
          this.player.play()//播放视频
          this.isPlay = true //改变播放状态
        }
      } else {
        //点的不是同一个
        // 先把原来的视频停止
        this.player.stop()
        let obj = this.data.recordList.find(item => item.vid === this.data.vid)
        // 重新创建视频执行上下文覆盖原来的执行上下文,执行新的一轮播放
        this.player = wx.createVideoContext(this.data.vid)
        obj&&this.player.seek(obj.currentTime)
        this.player.play()
        this.vid = this.data.vid
        this.isPlay = true
      }
    }
  },


  // 保存视频播放记录
  handlerTimeUpdate(event) {
    // console.log(event.detail)
    // 首先我们得看记录列表当中是否已经存在当前播放的这个视频的记录
    // 如果列表当中已经存在了当前播放的视频记录，我们只需要找到这个视频记录修改时间即可
    // 如果列表当中没有当前播放的视频记录，那么我们就要创建新的记录对象添加到列表当中
    let recordList = this.data.recordList
    let obj = recordList.find(item => item.vid === this.data.vid)
    if(obj){
      //已经存在历史记录
      obj.currentTime = event.detail.currentTime
    }else{
      // 不存在
      recordList.push({
        vid:this.data.vid,
        currentTime:event.detail.currentTime
      })
    }
    this.setData({
      recordList
    })
  },


  // 监听视频播放完成，清除这个视频的播放记录
  handlerEnded(){
    //从记录列表当中删除当前播放的这个视频的记录
    // 找到当前这个视频记录的下标
    let recordList = this.data.recordList
    let index = recordList.findIndex(item => item.vid === this.data.vid)
    index !== -1 && recordList.splice(index,1)
    this.setData({
      recordList
    })
  },

  // 下拉刷新视频
  handlerRefresherrefresh(){
    // 重新请求视频列表数据
    this.flag = true
    this.getVideoList()
  },
  // 上拉触底后再懒加载数据
  handlerScrolltolower(){
    let videoList = this.data.videoList
    let newArr = videoList.concat(videoList)
    if(newArr.length <= 40){
      this.setData({
        videoList:newArr
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    // 获取navList，存储第一次的id
    let userInfo = wx.getStorageSync('userInfo_key')
    await this.getNavList()
    userInfo && userInfo.nickname && this.data.navId && this.getVideoList()
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   * 无论是点击系统的分享还是自己设定的按钮分享，最终都会调用到这个函数
   * 但是系统的分享必须要写这个函数，按钮的分享可以不用（不写的话按钮分享无法更改）
   * 因此这个函数默认都写上
   */
  onShareAppMessage: function ({from}) {
    //我们可以在这里面区分是点击的系统分享上面的三个点
    // 还是自己的按钮分享
    if(from === 'button'){
      // 用户在按钮分享
      return {
        title:'这是按钮转发',
        path:'/pages/video/video',
        imageUrl:'../../static/images/mylove.jpg'
      }
    }else{
      // 用户在系统分享
      return {
        title:'这是系统分享',
        path:'/pages/video/video',
        imageUrl:'../../static/images/mylove.jpg'
      }
    }
  }
})